<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-09-04 11:17:44
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-08-08 16:35:03
 * @FilePath: /things-admin/src/view/dataScreen/components/footer/footer_right.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">
    <div class="header">
      <div class="title">健康检测</div>
      <img class="cope" src="../../images/997.png" alt="" @click.stop="cope" />
    </div>
    <div class="mian">
      <div id="echarts_twenty"></div>
      <div id="echarts_twenty_one"></div>
    </div>
        <!-- 放大弹窗 -->
        <div class="tanchuang" v-show="isMask">
      <div class="header">
        <div class="title">健康检测</div>
        <div class="el-icon-circle-close" @click.stop="cope"></div>
      </div>
      <div class="mian">
        <div id="echarts_twenty_copy"></div>
        <div id="echarts_twenty_one_copy"></div>
      </div>
    </div>
    <div class="mask" v-show="isMask"></div>
    <!-- PC放大弹窗 -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import { fatigueStatistics, healthStatistics } from "@/base/api/DataScreen.ts";
export default {
  data() {
    return {
      data_one: [],
      data_two: [],
      provinceId: this.provinceId || "",
      cityId: this.cityId || "",
      name: this.name || "",
      isMask:false
    };
  },
  props:['name','cityId','provinceId'],
  watch:{
    provinceId1(newval){
    this.provinceId1 = newval
    },
    cityId1(newval){
      this.cityId1 = newval
    },
    name(newval){
      if(newval){
        this.name = newval
      this.fatigueStatistics()
      this.healthStatistics()
      }
  
    },
  },

  methods: {
    //复制信息
    cope() {
      this.isMask = !this.isMask
    },
    echartsTwenty(data) {
      let myChartTwenty = echarts.init(
        document.getElementById("echarts_twenty")
      );
      let option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "2%", // 距离容器右侧的距离
          top: "20%", // 距离容器顶部的距离
          bottom: "10%", // 距离容器底部的距离
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          name: "\n   检测\n   项目",
          nameLocation: "end",
          nameGap: 0,
          data: ["血氧", "心率\n(次/分)", "微循环"],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10,
            },
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 10, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "left",
            verticalAlign: "top",
          },
        },
        yAxis: {
          name: "  平均\n  数值",
          position: "right",
          nameGap: 15,
          nameLocation: "end",
          axisLine: {
            show: false, // 隐藏y轴轴线
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false, // 隐藏y轴分隔线
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10,
            },
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 10, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "left",
          },
        },
        series: [
          {
            type: "bar",
            data: [data.avgQt, data.avgHr, data.avgHrv],
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 10,
              formatter: function (params) {
                if (params.name == "血氧") {
                  return params.value + "%";
                } else {
                  return params.value;
                }
              },
            },

            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function (params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" },
                    ]),
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1, // 设置柱子边框宽度为2
              },
            },
            barWidth: "30%", //柱子的宽度
          },
        ],
      };
      myChartTwenty.setOption(option);
    },
    echartsTwentyOne() {
      let myChartTwentyOne = echarts.init(
        document.getElementById("echarts_twenty_one")
      );
      let option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "20%", // 距离容器顶部的距离
          bottom: "10%", // 距离容器底部的距离
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          name: "\n   检测\n   项目",
          nameLocation: "end",
          nameGap: 0,
          data: this.data_one,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10,
            },
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 10, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "left",
            verticalAlign: "top",
          },
        },
        yAxis: {
          name: "  人数",
          position: "right",
          nameGap: 15,
          nameLocation: "end",
          axisLine: {
            show: false, // 隐藏y轴轴线
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false, // 隐藏y轴分隔线
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10,
            },
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 10, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "left",
          },
        },
        series: [
          {
            type: "bar",
            data: this.data_two,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 10,
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function (params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#0061F8" },
                      { offset: 1, color: "rgba(0,97,248,0)" },
                    ]),
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1, // 设置柱子边框宽度为2
              },
            },
            barWidth: "40%", //柱子的宽度
          },
        ],
      };
      myChartTwentyOne.setOption(option);
    },
    echartsTwentyCopy(data) {
      let myChartTwenty = echarts.init(
        document.getElementById("echarts_twenty_copy")
      );
      let option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "2%", // 距离容器右侧的距离
          top: "20%", // 距离容器顶部的距离
          bottom: "10%", // 距离容器底部的距离
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        xAxis: {
          name: "\n   检测\n   项目",
          nameLocation: "end",
          nameGap: 0,
          data: ["血氧", "心率\n(次/分)", "微循环"],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 20,
            },
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "left",
            verticalAlign: "top",
          },
        },
        yAxis: {
          name: "  平均\n  数值",
          position: "right",
          nameGap: 15,
          nameLocation: "end",
          axisLine: {
            show: false, // 隐藏y轴轴线
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false, // 隐藏y轴分隔线
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 20,
            },
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "left",
          },
        },
        series: [
          {
            type: "bar",
            data: [data.avgQt, data.avgHr, data.avgHrv],
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 20,
              formatter: function (params) {
                if (params.name == "血氧") {
                  return params.value + "%";
                } else {
                  return params.value;
                }
              },
            },

            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function (params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" },
                    ]),
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1, // 设置柱子边框宽度为2
              },
            },
            barWidth: "30%", //柱子的宽度
          },
        ],
      };
      myChartTwenty.setOption(option);
    },
    echartsTwentyOneCopy() {
      let myChartTwentyOne = echarts.init(
        document.getElementById("echarts_twenty_one_copy")
      );
      let option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "20%", // 距离容器顶部的距离
          bottom: "10%", // 距离容器底部的距离
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        xAxis: {
          name: "\n   检测\n   项目",
          nameLocation: "end",
          nameGap: 0,
          data: this.data_one,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 20,
            },
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "left",
            verticalAlign: "top",
          },
        },
        yAxis: {
          name: "  人数",
          position: "right",
          nameGap: 15,
          nameLocation: "end",
          axisLine: {
            show: false, // 隐藏y轴轴线
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false, // 隐藏y轴分隔线
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 20,
            },
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "left",
          },
        },
        series: [
          {
            type: "bar",
            data: this.data_two,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 20,
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function (params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#0061F8" },
                      { offset: 1, color: "rgba(0,97,248,0)" },
                    ]),
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1, // 设置柱子边框宽度为2
              },
            },
            barWidth: "40%", //柱子的宽度
          },
        ],
      };
      myChartTwentyOne.setOption(option);
    },
    //疲劳值检测
    fatigueStatistics() {
      fatigueStatistics(this.provinceId,this.cityId).then((res) => {
        // console.log(res,'------------疲劳值检测');
        this.data_two = [];
        this.data_one = [];
        res.data.forEach((item) => {
          this.data_one.push(item.fatigueLevel);
          this.data_two.push(item.count);
        });
        this.echartsTwentyOne();
        this.echartsTwentyOneCopy();
      });
    },
    //健康平均数据
    healthStatistics() {
      healthStatistics(this.provinceId,this.cityId).then((res) => {
        this.echartsTwenty(res.data[0]);
        this.echartsTwentyCopy(res.data[0]);
      });
    },
  },
  mounted() {
    this.fatigueStatistics();
    this.healthStatistics();
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 448px;
  height: 256px;
  margin-left: 36px;
  background: url(../../images/3473.png) no-repeat;
  background-size: cover;
  .header {
    width: 448px;
    height: 46px;
    display: flex;
    align-items: center;
    .title {
      margin: 0 313.5px 0 21px;
      width: 80px;
      height: 29px;
      font-size: 20px;
      font-weight: 500;
      color: #ffffff;
      line-height: 29px;
    }
    .cope {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
  .mian {
    display: flex;
    #echarts_twenty {
      width: 224px;
      height: 210px;
      //   background-color: #fff;
    }
    #echarts_twenty_one {
      width: 224px;
      height: 210px;
    }
  }
  .mask {
      position: fixed;
      z-index: 99999998;
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .tanchuang {
      position: fixed;
      z-index: 99999999;
      width: 70%;
      height: 70%;
      top: 15%;
      left: 15%;
      background-color: #0a1632;
      .header {
        background: url(../../images/3473.png) no-repeat;
        background-size: cover;
        width: 100%;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          margin: 0 313.5px 0 21px;
          width: 80px;
          height: 29px;
          font-size: 20px;
          font-weight: 500;
          color: #ffffff;
          line-height: 29px;
        }
        div {
          width: 24px;
          height: 20px;
          cursor: pointer;
          color: white;
          font-size: 20px;
          margin-right: 20px;
        }
      }
      .mian {
        display: flex;
        margin-top: 100px;
        #echarts_twenty_copy {
          width: 504px;
          height: 410px;
          margin-left: 50px;
          //   background-color: #fff;
        }
        #echarts_twenty_one_copy {
          width: 524px;
          height: 410px;
          margin-left: 70px;
        }
      }
    }
}
</style>
